import React, { useEffect } from "react"
import { useNavigate, useParams } from "react-router-dom"
import { Button, Form, Input, Card, message } from "antd"
import {
  reqHospitalSetAdd,
  reqHospitalSetUpdate,
  reqOneHospitalSet,
} from "@api/hospital/hospitalSets"

export default function HospitalSetAddOrUpdate() {
  // 编程式导航，获取navigate
  const navigate = useNavigate()
  // 使用Form组件的hook useForm.创建form实例. 此时这个form实例是一个没有和任何表单绑定的form实例,需要利用form实例和form表单进行绑定
  const [form] = Form.useForm()
  // 获取路由参数 id
  const { id } = useParams()

  // 调用生命周期hook
  useEffect(() => {
    async function fetch(id: string) {
      // 调用接口，获取所匹配的单条数据
      const result = await reqOneHospitalSet(id as string)
      // 将数据动态渲染到form表单中
      form.setFieldsValue(result)
    }
    id && fetch(id)
  }, [])

  // 点击 保存 时触发的 成功 点击事件
  const onFinish = async () => {
    // 获取表单上的数据
    const data = form.getFieldsValue()
    // 判断是修改数据还是添加数据
    if (id) {
      // 给data中添加id属性
      data.id = id
      // 调用修改接口，修改数据
      await reqHospitalSetUpdate(data)
      message.success("修改医院成功")
    } else {
      // 请求添加医院设置
      await reqHospitalSetAdd(data)
      message.success("添加医院成功")
    }
    navigate("/syt/hospital/hospitalSet")
  }
  // 点击 保存 时触发的 失败 点击事件
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo)
  }
  // 点击 返回 时触发的点击事件
  const goBack = () => {
    navigate(-1)
  }

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off">
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: "请输入医院名称" }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: "请输入医院编号" }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: "请输入api基础路径" }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: "请输入联系人姓名" }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: "请输入合法的联系人手机",
              pattern: /^1[3-9]\d{9}$/, // 正则表达式
            },
          ]}>
          <Input />
        </Form.Item>
        {/* 按钮设置 */}
        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}>
            保存
          </Button>
          <Button onClick={goBack}>返回</Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
